<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue常用指令</title>
    <style>
        .my{
            border: red solid 1px;
        }
    </style>
</head>
<body>
    <div id="insert">
        <br>==============文本插值==============<br>
        <div>{{text}}</div>
        <!-- v-html属性: 把文本解析为html代码 -->
        <div v-html="text"></div>
    </div>

    <div id="bind">
        <br>==============绑定属性==============<br>
        <!-- v-bind:属性名   为html标签绑定属性值-->
        <a v-bind:href="url">百度一下</a><br>
        <!-- 简写: 直接冒号 :属性名 -->
        <a :href="url">百度一下</a><br>
        <a :class="cls">Hello Vue</a>
    </div>

    <div id="ifelse">
        <br>==============条件渲染==============<br>
        <!--条件判断-->
        <div v-if="num % 3 == 1">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">Hello</div>
    </div>

    <div id="list">
        <br>==============列表渲染==============<br>
        <ul>
            <li v-for="name of names">
                {{name}}
            </li>
            <li v-for="value of student">
                {{value}}
            </li>
        </ul>
    </div>


    <div id="affair">
        <br>==============事件绑定==============<br>
        <div>{{div}}</div>
        <button v-on:click="change()">单击改变div</button>
        <button v-on:dblclick="change()">双击改变div</button>

        <button @click="change()">单击改变div</button>
    </div>


    <div id="from">
        <br>==============表单绑定==============<br>
        <!--v-model 表单元素创建双向数据绑定 -->
        <input type="text" v-model="name"/>
        <br>
        <input type="number" v-model="age"/>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#insert",
        data:{
            text: "<b>Hello Vue</b>"
        }
    })

    //属性绑定Vue
    new Vue({
        el: "#bind",
        data:{
            //绑定超链接
            url: "http://www.baidu.com",
            //绑定样式类
            cls: "my"
        }
    })

    //条件渲染
    new Vue({
        el: "#ifelse",
        data:{
            num: 3,
            flag: true
        }
    })

    //列表渲染
    new Vue({
        el: "#list",
        data: {
            names:["张三","李四","王五"],
            student:{
                name: "赵六",
                age: 26
            }
        }
    })

    //事件绑定
    new Vue({
        //接管指定页面区域
        el:"#affair",
        data:{
            div: "我是一个div"
        },
        methods:{
            change(){
                this.div="我被改变了";
            }
        }
    })

    //表单绑定
    new Vue({
        //接管指定页面区域
        el:"#from",
        data:{
            name:"张三",
            age: 23
        }
    })
</script>
</html>